<template>
    <div class="Login">
        <div class="Login_box">
            <div class="fl Login_fl">
                <h1 class="Login_title">欢迎来到<br/>易采批</h1>
                <h2 class="Login_subtitle">你身边的采购专家</h2>
            </div>
            <div class="fr Login_fr">
                <div class="Login_header">
                    <nuxt-link class="Login_header_text" to="/login/">登录</nuxt-link>
                    <span class="Login_header_divide">/</span>
                    <nuxt-link class="Login_header_text Login_header_cur" to="/register/">找回密码</nuxt-link>
                </div>
              <div class="Login_form">
                <div class="Login_form_group">
                  <div class="Login_form_group_div">
                    <label class="Login_form_label">请输入手机号</label>
                    <button class="Login_form_getCode fr"
                      :data-validate="errors.has('mobile')"
                      @click="sendSemCode" v-timer>获取动态码</button>
                  </div>
                  <input
                    :class="{'Login_form_input_danger':errors.has('mobile')}"
                    v-validate="{required: true, max: 11, min: 11, regex: isMobile}"
                    class="Login_form_input"
                    v-model="mobile" name="mobile" maxlength="11" type="tel"/>
                    <p class="Login_form_tip" v-show="errors.has('mobile')">{{ errors.first('mobile') }}</p>
                </div>
                <div class="Login_form_group">
                  <div class="Login_form_div">
                    <label class="Login_form_label">请输入动态码</label>
                  </div>
                  <input
                    :class="{'Login_form_input_danger':errors.has('code')}"
                    v-validate="'required|max:4|min:4'"
                    maxlength="4" v-model="code"
                    type="text" name="code" class="Login_form_input"/>
                  <p class="Login_form_tip" v-show="errors.has('code')">{{ errors.first('code') }}</p>
                </div>
                <div class="Login_form_group">
                  <div class="Login_form_div">
                    <label class="Login_form_label">请输入新密码</label>
                  </div>
                  <input
                    :class="{'Login_form_input_danger':errors.has('pwd')}"
                    class="Login_form_input"
                    v-validate="'required|max:16|min:6'"
                    maxlength="16"
                    v-model="pwd"
                    name="pwd"
                    type="password"/>
                  <p class="Login_form_tip" v-show="errors.has('pwd')">{{ errors.first('pwd') }}</p>
                </div>
                <div class="Login_form_footer">
                  <button class="Login_form_btn"
                    :disabled="errors.has('mobile')||errors.has('code')||errors.has('pwd')"
                    @click="doSubmit">找回密码</button>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { isMobile } from "~/utils/regx"
    import { haslogin } from "~/middleware/logincheck"
    import { sendSmsCode, resetPassword } from "~/api/"
    export default {
      middleware: haslogin,
      data() {
        return {
          isMobile,
          mobile: "",
          code: "",
          pwd: ""
        }
      },
      methods: {
        sendSemCode () {
          this.$validator.validate('mobile').then(async (result) => {
            if (!result) return
            const res = await sendSmsCode(this, 'RESET', this.mobile)
            if (res.code === '0') {
              this.$message.success('验证码发送成功')
            } else {
              this.$message.error(res.message)
            }
          })
        },
        doSubmit() {
          this.$validator.validateAll().then( async (result) => {
            if (!result) return
            const res = await resetPassword(this, this.mobile, this.code, this.pwd)
            if (res.code === '0') {
              this.$message.success('密码重置成功')
              this.$router.push('/login/')
            } else {
              this.$message.error(res.message)
            }
          });
        }
      },
    }
</script>

<style lang="scss" scoped>
  .Login_form_group {
    margin-bottom: 35px;
  }
</style>
